{% from 'macros/icon.njk' import icon with context %}

{% macro featuredTweetCard() %}
{% set tweet = tweets[0] %}
{% if tweet %}
  <div class="masonry-grid__item featured-card tweet-card hairline rounded-lg width-full">
    <div class="card-title-bar color-blue-medium">
      {{ icon('twitter', {hidden: true}) }}
      <span class="gap-left-300 flex-1 user-select-none">Twitter</span>
    </div>

    <a href="{{ tweet.tweet_url }}" class="link decoration-none no-visited display-inline-flex type--small gap-top-300">
      {{ helpers.formatDateShort(tweet.created_at, locale) }}
    </a>

    {#
      The .tweet-card__text element uses whitespace: pre-wrap so we can't let
      the html minifier touch it or it will mess up the formatting of the tweet.
    #}
    <!-- htmlmin:ignore -->
    <p class="tweet-card__text gap-top-300">{{ tweet.formatted_text | safe }}</p>
    <!-- htmlmin:ignore -->

    <div class="gap-top-400">
      <a href="https://twitter.com/chromiumdev" class="material-button button-text display-inline-flex color-primary">
        {{ 'i18n.common.follow' | i18n(locale) }} @ChromiumDev
      </a>
    </div>
  </div>
{% endif %}
{% endmacro %}
